<template>
  <div>
    模板
    <el-table :data="tableData" style="width: 100%" class="table">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="Name"> </el-table-column>
      <el-table-column prop="amount1" sortable label="Amount 1" />
      <el-table-column prop="amount2" sortable label="Amount 2" />
      <el-table-column prop="amount3" sortable label="Amount 3" />
      <el-table-column fixed="right" label="Operations" min-width="120">
        <template #default>
          <el-button link type="primary" size="small" @click="handleClick"> 删除 </el-button>
          <el-button link type="primary" size="small">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    平台管理
    <el-table
      :data="lists"
      style="width: 100%"
      class="table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" width="50" />
      <el-table-column prop="account" label="账号" width="120" align="center" />
      <el-table-column prop="name" label="用户名" width="80" align="center" />
      <el-table-column prop="gender" label="性别" width="80" align="center" />
      <el-table-column prop="Email" label="电子邮箱" width="150" align="center" />
      <el-table-column prop="school" label="所属学校" width="140" align="center" />
      <el-table-column label="是否启用" width="180" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.Enable">是</el-tag>
          <el-tag type="danger" v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="角色" width="180" align="center">
        <template #default="scope">
          <span>
            <span v-for="(item, index) in scope.row.role" :key="index">
              <el-tag>{{ item.name }}</el-tag
              >&nbsp;
            </span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> 修改 </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    分配高校专家组
    <el-table
      :data="lists2"
      style="width: 100%"
      class="table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column type="index" width="30" />
      <el-table-column prop="name" sortable label="项目名称" width="110" align="center" />
      <el-table-column prop="type" sortable label="项目类型" width="110" align="center" />
      <el-table-column prop="category" sortable label="项目类别" width="110" align="center" />
      <el-table-column prop="firdiscipline" sortable label="一级学科" width="110" align="center" />
      <el-table-column prop="secdiscipline" sortable label="二级学科" width="110" align="center" />
      <el-table-column prop="expert_group" sortable label="高校专家组" width="120" align="center" />
      <el-table-column prop="first_host" sortable label="第一主持人" width="120" align="center" />
      <el-table-column prop="batch" sortable label="所属批次" width="110" align="center" />
      <el-table-column label="状态" sortable width="200" align="center">
        <template #default="scope">
          <span>
            <span>
              <el-tag v-if="scope.row.state === 1" type="success">审核通过</el-tag>
              <el-tag v-else-if="scope.row.state === 2">审核中</el-tag>
              <el-tag v-else type="danger">未审核通过</el-tag>
            </span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <span v-if="lists2.length != 0">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> 修改 </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
              删除
            </el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    高校专家组评审情况
    <el-table
      :data="lists3"
      style="width: 100%"
      class="table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column type="index" width="30" />
      <el-table-column prop="name" sortable label="项目名称" width="120" align="center" />
      <el-table-column prop="type" sortable label="项目类型" width="120" align="center" />
      <el-table-column prop="category" sortable label="项目类别" width="120" align="center" />
      <el-table-column prop="firdiscipline" sortable label="一级学科" width="120" align="center" />
      <el-table-column prop="expert_group" sortable label="高校专家组" width="120" align="center" />
      <el-table-column
        prop="secdiscipline"
        sortable
        label="高校专家评审情况"
        width="170"
        align="center"
      />
      <el-table-column prop="first_host" sortable label="第一主持人" width="120" align="center" />
      <el-table-column prop="batch" sortable label="所属批次" width="120" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <span v-if="lists2.length != 0">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> 修改 </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
              删除
            </el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    高校审核项目
    <el-table
      :data="lists4"
      style="width: 100%"
      class="table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column type="index" width="30" />
      <el-table-column prop="sort_code" sortable label="排序码" width="120" align="center" />
      <el-table-column prop="name" sortable label="项目名称" width="120" align="center" />
      <el-table-column prop="type" sortable label="项目类型" width="120" align="center" />
      <el-table-column prop="category" sortable label="项目类别" width="120" align="center" />
      <el-table-column
        prop="firdiscipline"
        sortable
        label="所属重点领域"
        width="150"
        align="center"
      />
      <el-table-column prop="firdiscipline" sortable label="一级学科" width="120" align="center" />
      <el-table-column prop="expert_group" sortable label="高校专家组" width="120" align="center" />
      <el-table-column
        prop="expert_review"
        sortable
        label="高校专家评审情况"
        width="170"
        align="center"
      />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <span v-if="lists2.length != 0">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> 修改 </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
              删除
            </el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    项目编号管理
    <el-table
      :data="lists5"
      style="width: 100%"
      class="table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="30" />
      <el-table-column type="index" width="30" />
      <el-table-column prop="sort_code" sortable label="排序码" width="120" align="center" />
      <el-table-column prop="project_no" sortable label="项目编号" width="120" align="center" />
      <el-table-column prop="name" sortable label="项目名称" width="120" align="center" />
      <el-table-column prop="type" sortable label="项目类型" width="120" align="center" />
      <el-table-column prop="level" sortable label="项目级别" width="120" align="center" />
      <el-table-column prop="category" sortable label="项目类别" width="120" align="center" />
      <el-table-column prop="firdiscipline" sortable label="一级学科" width="110" align="center" />
      <el-table-column prop="secdiscipline" sortable label="二级学科" width="110" align="center" />
      <el-table-column prop="first_host" sortable label="第一主持人" width="120" align="center" />
      <el-table-column
        prop="expert_review"
        sortable
        label="高校专家评审情况"
        width="170"
        align="center"
      />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <span v-if="lists2.length != 0">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> 查看 </el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    项目调整
    <el-table
      :data="lists6"
      style="width: 100%"
      class="table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="30" />
      <el-table-column type="index" width="30" />
      <el-table-column prop="project_no" sortable label="项目编号" width="120" align="center" />
      <el-table-column prop="name" label="项目名称" width="250" align="center" />
      <el-table-column prop="type" sortable label="项目类型" width="120" align="center" />
      <el-table-column prop="level" sortable label="项目级别" width="120" align="center" />
      <el-table-column prop="category" sortable label="项目类别" width="120" align="center" />
      <el-table-column prop="firdiscipline" sortable label="一级学科" width="110" align="center" />
      <el-table-column prop="secdiscipline" sortable label="二级学科" width="110" align="center" />
      <el-table-column prop="first_host" sortable label="第一主持人" width="120" align="center" />
      <el-table-column prop="batch" sortable label="所属批次" width="170" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <span v-if="lists2.length != 0">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> 查看 </el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="show">查看</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleDelete = (index, row) => {
  console.log(index, row)
}

const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
const show = () => {
  console.log(multipleSelection.value)
}
// 平台管理
const lists = [
  {
    id: 1,
    account: '123456',
    name: '张三',
    gender: '男',
    Email: '123456@qq.com',
    school: '桂林信息科技学院',
    Enable: true,
    role: [{ name: '学生' }]
  },
  {
    id: 1,
    account: '123456',
    name: '李四',
    gender: '男',
    Email: '123456@qq.com',
    school: '桂林信息科技学院',
    Enable: false,
    role: [{ name: '指导老师' }, { name: '高校专家' }]
  }
]
// 分配高校专家组
const lists2 = [
  {
    id: 1,
    name: '张三',
    type: '类型',
    category: '类别',
    firdiscipline: '一级学科',
    secdiscipline: '二级学科',
    expert_group: '高校专家组',
    first_host: '第一主持人',
    batch: '所属批次',
    state: 1
  },
  {
    id: 1,
    name: '张三',
    type: '类型',
    category: '类别',
    firdiscipline: '一级学科',
    secdiscipline: '二级学科',
    expert_group: '高校专家组',
    first_host: '第一主持人',
    batch: '所属批次',
    state: 2
  },
  {
    id: 1,
    name: '张三',
    type: '类型',
    category: '类别',
    firdiscipline: '一级学科',
    secdiscipline: '二级学科',
    expert_group: '高校专家组',
    first_host: '第一主持人',
    batch: '所属批次',
    state: 3
  }
]
// 高校专家组评审情况
const lists3 = [
  {
    id: 1,
    name: '某某系统',
    type: '类型',
    category: '类别',
    firdiscipline: '一级学科',
    expert_group: '高校专家组',
    expert_review: '高校专家评审情况',
    first_host: '第一主持人',
    batch: '所属批次',
    state: 1
  }
]
// 高校审核项目
const lists4 = [
  {
    id: 1,
    sort_code: '排序码',
    name: '某某系统',
    type: '类型',
    category: '类别',
    focus_areas: '所属重点领域',
    firdiscipline: '一级学科',
    secdiscipline: '二级学科',
    first_host: '第一主持人',
    expert_review: '高校专家评审情况',
    state: 1
  }
]
// 项目编号管理
const lists5 = [
  {
    id: 1,
    sort_code: '排序码',
    project_no: 123123,
    name: '某某系统',
    type: '类型',
    level: '级别',
    category: '类别',
    firdiscipline: '一级学科',
    secdiscipline: '二级学科',
    expert_group: '高校专家组',
    expert_review: '高校专家评审情况',
    first_host: '第一主持人',
    batch: '所属批次',
    state: 1
  }
]
// 项目调整
const lists6 = [
  {
    id: 1,
    project_no: 123123,
    name: '某某系统',
    type: '类型',
    level: '级别',
    category: '类别',
    firdiscipline: '一级学科',
    secdiscipline: '二级学科',
    expert_group: '高校专家组',
    first_host: '第一主持人',
    batch: '所属批次',
    state: 1
  }
]
// 定义示例数据
const tableData = [
  {
    id: '12987122',
    name: 'Tom',
    amount1: '234',
    amount2: 'abc',
    amount3: 10
  },
  {
    id: '12987123',
    name: 'Tom',
    amount1: '165',
    amount2: 'efg',
    amount3: 12
  },
  {
    id: '12987124',
    name: 'Tom',
    amount1: '324',
    amount2: 'hij',
    amount3: 9
  },
  {
    id: '12987125',
    name: 'Tom',
    amount1: '621',
    amount2: 'xyz',
    amount3: 17
  },
  {
    id: '12987126',
    name: 'Tom',
    amount1: '539',
    amount2: 'qwe',
    amount3: 15
  }
]

// 汇总方法
// const getSummaries = (param) => {
//   const { columns, data } = param
//   const sums = []
//   columns.forEach((column, index) => {
//     if (index === 0) {
//       sums[index] = h('div', { style: { textDecoration: 'underline' } }, ['Total Cost'])
//       return
//     }
//     const values = data.map((item) => Number(item[column.property]))
//     if (!values.every((value) => Number.isNaN(value))) {
//       sums[index] = `$ ${values.reduce((prev, curr) => {
//         const value = Number(curr)
//         if (!Number.isNaN(value)) {
//           return prev + curr
//         } else {
//           return prev
//         }
//       }, 0)}`
//     } else {
//       sums[index] = 'N/A'
//     }
//   })

//   return sums
// }
</script>
//
<style lang="less">
.el-table th {
  background-color: #1461cd !important;
  color: white !important;
  text-align: center;
  padding: 10px;
  &:hover {
    color: #a3daff !important;
  }
}
.el-table .sort-caret.ascending {
  border-bottom-color: #ffffff;
}
.el-table .sort-caret.descending {
  border-top-color: #ffffff;
}
</style>
